<template>
    <div>
        <div class="top  container-med2" style="width:1200px; ">
            <img src="../assets/logo.jpg" />
            <p>实验管理系统</p>




            <el-col :span="4" class="userinfo">
                <el-dropdown trigger="hover">
                    <span class="el-dropdown-link userinfo-inner"> <a>你好，{{name}}| </a></span>
                    <el-dropdown-menu slot="dropdown"  class="userinfo_1">
                        <el-dropdown-item style="color: #2c3e50; font-weight: 600" @click.native="go">修改密码</el-dropdown-item>

                        <el-dropdown-item divided @click.native="open2" style="color: #2c3e50; font-weight: 600">退出登录</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
            </el-col>

        </div>

    </div>
</template>

<script>
import axios from 'axios'

    export default {
        data() {
            return {

            }
        },
        computed:{
            name(){
                return this.$store.state.user.name;
            }
        },
        created:function(){ 
            var params = new URLSearchParams();
            var user_account = window.localStorage.getItem('user');
            if(user_account){
                 params.append('account',user_account);
                var _this = this;
                axios.post('/user',params).then(function(res){
                    _this.$store.commit('user',res.data.signin_user);
                })
            }
           
        },
        methods: {
            go(){
                this.$router.push('/ResetPw');
            },
            open2() {

                this.$confirm('是否登出?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.logout();
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消登出'
                    });
                });

            },
            logout() {
                console.log('4554')
                var _this = this;
                axios.post('/user/signout').then(function(res){
                    _this.$store.commit('user',res.data.signin_user);
                    window.localStorage.setItem('user',null);
                    _this.$router.push('/')
                    _this.$message({
                        type: 'success',
                        message: '登出成功'
                    })
                })


            },
        }
    }
</script>

<style>
    .top img{
        width: 60px;
        height: 50px;
        float: left;
        margin-left: 5px;
        margin-top: 5px;

    }

    .top p{
        float: left;
        font-family: "华文行楷";
        font-size: 32px;
        margin-top: 15px;
        margin-left: 10px;
        color: white;
    }

    .top a{
        color: white;
        margin-top: 18px;
        float: right;
        
        cursor: pointer;
        font-size: 16px;
        font-weight: 600;

    }

    .top a:last-child{
        margin-right: 5px;
    }
    .userinfo{
        float: right;
        margin-right: -50px;
    }
    .userinfo_1{
        margin-top:25px;
        
    }
    .container-med2{
    margin: 0 auto ;
    }
</style>